<!DOCTYPE html>
<html class="" lang="zh-CN">

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>666电影</title>
  <meta charset="UTF-8">
  <meta name="renderer" content="webkit">
  <meta name="referrer" content="always">
  <meta name="referrer" content="no-referrer">
  <meta name="force-rendering" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<script src="./js/vue.js"></script>
	<script src="./js/myStorage.js"></script>
	<script src="./js/index.js"></script>
	<script src="./utils/util.js"></script>
	<script src="./element-ui/lib/index.js"></script>
	<script src="./js/otherData.js"></script>
	<link href="./element-ui/lib/theme-chalk/index.css" rel="stylesheet" type="text/css" />
	<link href="./css/reset.css" rel="stylesheet" type="text/css" />
	<link href="./css/common.css" rel="stylesheet" type="text/css" />
	<link href="./css/handler.css" rel="stylesheet" type="text/css" />
	<link href="./css/style.css" rel="stylesheet" type="text/css" />
  <link id="cssFile" rel="stylesheet" href="assets/black.css" type="text/css"/>
  <style>
    .main{
      overflow: auto;
      height: 100vh;
    }
  </style>
  <body>
    <div id="index">
      <div class="homepage">
        <strong>
          <div class="header">
            <div class="header-box">
              <div class="logo nonenav">
                666电影
              </div>
              <div class="search-box nonenav">
                <div class="searchbar-main">
                  <form name="search" method="get">
                    <div class="searchbar"><input class="search-input" v-model="searchKey" type="text" name="wd" autocomplete="off"
                        placeholder="搜索电影、电视剧、综艺、动漫"><i class="el-icon-star-off"></i><span>热搜榜</span><i class="el-icon-search" style="width: 40px;
                        padding: 20px;
                        font-size: 15px;" @click="handleSearch"></i></div>
                    <div class="search-recommend-box">
                      <div class="search-recommend">
                        <div class="search-history">

                        </div>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
              <div class="header-op">
                <div class="header-op-list">
                  <div class="drop">
                    <div class="header-op-list-btn header-op-history"><i class="icon el-icon-s-flag"></i><span>观看记录</span>
                    </div>
                    <div class="drop-content drop-history">
                      <div class="drop-content-box">
                        <ul class="drop-content-items historical">
                          <li class="drop-item drop-item-title"><i class="icon el-icon-s-flag"></i><strong>我的观影记录</strong>
                          </li>
                          <li class="drop-item drop-item-content nolist">
                            <div class="drop-prompt">暂无观看影片的记录</div>
                          </li>
                        </ul>
                      </div>
                    </div>
                    <div class="shortcuts-mobile-overlay"></div>
                  </div>
                  <div class="mac_user header-op-btn main-btn" title="会员中心"  @click="handleClickIntroduce"><i class="icon el-icon-user-solid"></i>开发组员介绍</div>
                  <div class="mac_user header-op-user main-btn" title="登录"  @click="handleClickLogin"><i class="icon el-icon-user-solid"@click="handleClickLogin"></i>登录</div>
                  <div class="header-op-list-btn header-op-search"><i class="icon el-icon-user-solid"></i></div>
                </div>
              </div>
            </div>
          </div>
        </strong>
      </div>
      <div class="sidebar">
        <strong>
          <div class="navbar open">
            <ul class="navbar-items swiper-wrapper">
              <li class="swiper-slide navbar-item "><a href="./index.htm" title="首页"
                class="links"></i><i class="el-icon-s-home"></i><span>首页</span></a></li>
              <li class="navbar-hr"></li>
              <li class="swiper-slide navbar-item active"><a href="./movies.htm" title="电影"
                  class="links"></i><i class="el-icon-video-play"></i><span>电影</span></a></li>
              <li class="swiper-slide navbar-item"><a href="./episode.htm" title="剧集"
                  class="links"></i><i class="el-icon-video-camera-solid"></i><span>剧集</span></a></li>
            </ul>
          </div>
        </strong>
        <div class="side-op">
          <div class="header-op-list">
            <div class="drop">
              <div class="header-op-list-btn header-op-history"><i class="icon icon-history-o"></i><span>观看记录</span></div>
              <div class="drop-content drop-history">
                <div class="drop-content-box">
                  <ul class="drop-content-items historical">
                    <li class="drop-item drop-item-title"><i class="icon icon-history"></i><strong>我的观影记录</strong></li>
                    <li class="drop-item drop-item-content nolist">
                      <div class="drop-prompt">暂无观看影片的记录</div>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="shortcuts-mobile-overlay"></div>
            </div>
            <div class="header-op-list-btn header-op-search"><i class="icon icon-search"></i></div>
            <div class="member_group">
              <div class="mac_user"><img
                  src="assets/touxiang.png"
                  class="useimg"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="main">
        <div class="content">
          <div class="module">
            <div class="module-heading">
              <h2 class="module-title"><a href="">电影<span
                    class="module-title-en"></span></a></h2>
              <div class="module-tab"><label class="module-tab-name"><span class="module-tab-value">推荐</span><i
                    class="icon-arrow"></i></label>
                <div class="module-tab-items">
                  <div class="module-tab-items-box">
                    <span class="module-tab-item tab-item" @click="currentIndex = index" v-for="(item,index) in movies">{{item.type}}</span></div>
                </div>
              </div>
              <div class="shortcuts-mobile-overlay"></div>
            </div>
            <div class="module-main tab-list active">
              <div class="module-items module-poster-items-base">
                <a
                  v-for="item in movies[currentIndex].movies"
                  href="" :title="item.title"
                  class="module-poster-item module-item">
                  <div class="module-item-cover">
                    <div class="module-item-note">完结</div>
                    <div class="module-item-pic"><img class="lazy lazyload"
                        referrerpolicy="no-referrer"
                        :src="item.img"
                        onerror="javascript:this.src='/mxtheme/images/errorpic.png'" style=""></div><i
                      class="icon-play"></i>
                  </div>
                  <div class="module-poster-item-info">
                    <div class="module-poster-item-title">{{item.title}}</div>
                  </div>
                </a>
              </div>
            </div>
          </div>

          
        <div class="module module-shadow">
          <div class="module-heading">
            <h2 class="module-title"><a href="">热榜<span
                  class="module-title-en">RANKING</span></a></h2><a class="module-heading-more"
              href="">更多<i class="el-icon-caret-right"></i></a>
          </div>
          <div class="module-main scroll-box">
            <div class="module-items scroll-content">
              <div class="module-paper-item module-item" v-for="ranking in rankings">
                <div class="module-paper-item-header"><i class="icon64 icon64 icon-dy"></i>
                  <h3 class="module-paper-item-title">{{ranking.type}}</h3>
                </div>
                <div class="module-paper-item-main">
                  <a href="" v-for="(item,index) in ranking.children">
                    <div class="module-paper-item-num module-paper-item-num-first">{{index + 1}}</div>
                    <div class="module-paper-item-info"><span class="module-paper-item-infotitle">{{item.title}}</span>
                      <p>{{item.label}}</p>
                    </div>
                    <div style="position: absolute;right: 12px;">
                      <i class="el-icon-caret-right"></i>
                    </div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        </div>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    let vue = new Vue({
      el: '#index',
      data(){
        return {
          swiperList:[{
            url:'https://s1.ax1x.com/2023/04/27/p9Qb0i9.jpg'
          },{
            url:'https://s1.ax1x.com/2023/04/28/p9QqU6P.jpg'
          },{
            url:'https://s1.ax1x.com/2023/04/27/p9QbdIJ.jpg'
          },{
            url:'https://s1.ax1x.com/2023/04/27/p9QbBGR.jpg'
          }],
          movies:movies,
          rankings:rankings,
          currentIndex:0,
          searchKey:'',
        }
      },
      created() {
      },
      methods: {
        handleSearch(){
          console.log('处理筛选',this.searchKey);
          this.$notify({
            title: '成功',
            message: `双向绑定查询【${this.searchKey}】`,
            type: 'success'
          });
        },
        handleClickIntroduce(){
          this.$notify({
            title: '成功',
            message: `处理开发组介绍`,
            type: 'success'
          });
          handleIntroduce();
        },
        handleClickLogin(){
          this.$notify({
            title: '成功',
            message: `处理登录`,
            type: 'success'
          });
          handleLogin();
        }
      }
    })
  </script>
</html>
